
//1
/* import React, { Component } from 'react';

 class App extends Component {
 render(){
   return (
       <div>
           <h3>App</h3>
     </div>
   )
 }
}
function hoc(WrappendComponent) {
    return WrappendComponent;
}
 export default hoc(App); */

/*  //2
 import React, { Component } from 'react';
 
  class App extends Component {
  render(){
    return (
        <div>
            <h3>App</h3>
      </div>
    )
  }
}
function hoc() {
    return class extends Component{
        render() {
            return <WrappendComponent></WrappendComponent>
        }
    }
}
  export default hoc(App); */

//3 将高阶组件放置到外部
/* import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <h3>App</h3>
      </div>
    );
  }
}
export default hoc3(App); */

//4 传递参数1
/* import React, { Component } from "react";
import {hoc4} from "./hoc";
class App extends Component {
    render() {
        return (
            <div>
                <h3>App</h3>
                <p>userName:{this.props.userName}</p>
                <p>age:{this.props.age}</p>
            </div>
        );
    }
}
export default hoc4(App,"zhangsan",12) */


//5
/* import React, { Component } from "react";
import {hoc5} from "./hoc";
class App extends Component {
    render() {
        return (
            <div>
                <h3>App</h3>
                <p>userName:{this.props.userName}</p>
                <p>age:{this.props.age}</p>
            </div>
        );
    }
}
export default hoc5(App,{
    userName:"zhangsan",
    age:88
}) */


// 6.
/* import React, { Component } from "react";
import {hoc6} from "./hoc";
class App extends Component {
    render() {
        return (
            <div>
                <h3>App</h3>
                <p>userName:{this.props.userName}</p>
                <p>age:{this.props.age}</p>
            </div>
        );
    }
}
export default hoc6({
    userName:"lisi",
    age:99
})(App); */

//7
/* import React, { Component } from "react";
import {hoc7} from "./hoc";
 class App extends Component {
 render(){
   return (
       <div>
           <h3>App</h3>
           <p>userName:{ this.props.userName}</p>
           <p>age:{this.props.age}</p>
     </div>
   )
 }
}
export default hoc7(function({userName,age}){
    return {
        userName,
        age
    }
})(App); */